<template>
  <div>
    <h1>
      Child
      <p>我叫 {{ name }}，今年{{ age }}，{{ address }}</p>
      <p>我的爱好是：{{ hobby }}</p>
    </h1>
    <button @click="changeValue">change</button>
  </div>
</template>

<script setup>
// props: [] // props: {}
// js中Vue传值的类型是大写
const props = defineProps({
  name: String,
  age: {
    type: Number,
    default: 100
  },
  isMan: Boolean,
  address: {
    type: Object,
    default: () => {
      return {
        province: '广东省',
        city: '东莞'
      }
    }
  },
  hobby: {
    type: Array,
    required: true,
    default: () => {
      return ['抽烟', '喝酒', '烫头']
    }
  }
})

const emits = defineEmits(['myevent'])

const changeValue = () => {
  //   console.log(props)
  //   props.hobby = ['aaa', 'bbb', 'ccc']
  //   props.age = 100
  //   props.name = '梁坤'
  // Vue遵循单向数据流原则，不要直接在子组件中更改父组件传递过来的值
  // 如果你希望子组件能显示你想要的值，那么正确的流程应该是，把你要改的值，传递给父组件，让父组件去更改
  /**
   * 参数1：事件名称
   * 参数2：参数
   */
  emits('myevent', ['喝茶', '读书', '写字'])
}
</script>
